<template>
    <div>
        <!-- 面包屑区域 -->
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>志愿者管理</el-breadcrumb-item>
            <el-breadcrumb-item>志愿者审核</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 头部区域  -->
        <el-row :gutter="20">
            <el-col :span="4">
                <el-input v-model="ActivityId" size="large"  placeholder="活动ID" clearable />
            </el-col>
            <el-col :span="4">
                <el-row :gutter="100">
                    <el-col :span="4">
                        <el-button type="info" size="large" @click="queryActivity">
                            <el-icon>
                                <Search />
                            </el-icon>&nbsp; 查询</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <!-- 列表区域 -->
        <el-table :data="activityList" stripe border style="width: 100%">
            <el-table-column type="index" label="#" width="40px" />
            <el-table-column prop="name"  align="center" label="姓名" />
            <el-table-column prop="sex" align="center" label="性别" />
            <el-table-column prop="age" align="center" label="年龄" />
            <el-table-column prop="phone" align="center" label="联系方式" />
            <el-table-column>
                <template v-slot="scope">
                    <el-button type="primary" @click="handleUpdate(scope.row)">同意</el-button>
                    <el-button type="danger" @click="handleRefuse(scope.row)">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize" :page-sizes="[5, 7]"
            background layout="total, sizes, prev, pager, next, jumper" :total="query.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>
  </template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { getActivity, updateActivity } from '@/api/volunteerall/checkVolunteer'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
  setup () {
    onMounted(() => {
      getActivityList()
    })
    // 活动列表
    const activityList = ref([])
    // 分页的查询数据
    const query = reactive({
      currentPage: 1,
      pageSize: 5,
      total: 0,
      status: 1
    })
    // 活动数据
    const activityForm = reactive({
      name: '',
      sex: '',
      age: '',
      phone: ''
    })

    const ActivityId = ref('')

    const saveRef = ref<FormInstance>()
    // 是否展开编辑页面
    const isDialogEdit = ref(false)
    const handleSizeChange = (Val:number) => {
      query.pageSize = Val
    }
    const handleCurrentChange = (Val:number) => {
      query.currentPage = Val
      getActivityList()
    }
    const handleUpdate = async (row: any) => {
      ElMessageBox.confirm(
        '次操作将使该用户成为志愿者，是否确定?',
        '提示',
        {
          confirmButtonText: '确定  ',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const volunteer = { status: 0 }
          Object.assign(volunteer, row)
          volunteer.status = 0
          const { data: res } = await updateActivity(volunteer)
          if (res.code !== 200) return ElMessage.error(res.msg)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getActivityList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除'
          })
        })
    }

    const handleRefuse = (row: any) => {
      ElMessageBox.confirm(
        '此操作会永久删除数据，是否继续?',
        '提示',
        {
          confirmButtonText: '确定  ',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          const volunteer = { status: 2 }
          Object.assign(volunteer, row)
          volunteer.status = 2
          const { data: res } = await updateActivity(volunteer)
          if (res.code !== 200) return ElMessage.error(res.msg)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getActivityList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除'
          })
        })
    }

    // 查询所有的活动
    const getActivityList = async () => {
      const { data: res } = await getActivity(query.status, query.currentPage, query.pageSize)
      if (res.code !== 200) return ElMessage.error('获取数据失败，请检查网络！')
      query.total = res.data.total
      activityList.value = res.data.records
      //   console.log(res)
    }
    // 根据查询信息查询
    const queryActivity = () => {
      console.log('ok')
    }

    return {
      query,
      isDialogEdit,
      handleSizeChange,
      handleCurrentChange,
      handleUpdate,
      activityForm,
      activityList,
      getActivityList,
      saveRef,
      ActivityId,
      handleRefuse,
      queryActivity
    }
  }
})
</script>

  <style lang="less" scoped>

  </style>
